<div class="visualization-card">
  <!--visualization title block-->
  <div class="visualization-title-block" *ngIf="!(visualizationUiConfig$ | async)?.fullScreen">
    <visualization-title-section
      [id]="id"
      [uiConfigId]="(visualizationUiConfig$ | async)?.id"
      [showBody]="(visualizationUiConfig$ | async)?.showBody"
      [fullScreen]="(visualizationUiConfig$ | async)?.fullScreen"
      [type]="(visualizationConfig$ | async)?.currentType"
      [name]="(visualizationObject$ | async)?.name"
      (toggleVisualization)="onToggleVisualizationBody($event)"
    ></visualization-title-section>
  </div>
  <!--end of visualization title block-->

  <!--visualization body block-->
  <div class="visualization-body-block"
       [style.height]="(visualizationUiConfig$ | async)?.height"
       *ngIf="(visualizationUiConfig$ | async)?.showBody">
    <!--visualization body header-->
    <div class="visualization-body-header-block">
      <visualization-header-section
        [id]="id"
        [uiConfigId]="(visualizationUiConfig$ | async)?.id"
        [showFilters]="(visualizationUiConfig$ | async)?.showFilters"
        [fullScreen]="(visualizationUiConfig$ | async)?.fullScreen"
        [visualizationLayer]="(visualizationLayers$ | async) ? (visualizationLayers$ | async)[0] : null"
        (fullScreenAction)="onFullScreenAction($event)"
        (visualizationLayerUpdate)="onVisualizationLayerUpdate($event)"
      ></visualization-header-section>
    </div>
    <!--end of visualization body header-->

    <!--visualization body content block-->
    <div class="visualization-body-content-block" [style.height]="(visualizationUiConfig$ | async)?.height">
      <!--visualization loader-->
      <div class="visualization-body-loader"
           *ngIf="(visualizationProgress$ | async) &&
           (visualizationProgress$ | async).statusCode === 200 &&
           (visualizationProgress$ | async).percent < 100">
        <app-visualization-card-loader
          [visualizationType]="(visualizationConfig$ | async)?.currentType"
          [height]="(visualizationUiConfig$ | async)?.height"
          [name]="(visualizationObject$ | async)?.name"
        ></app-visualization-card-loader>
      </div>
      <!--end of visualization loader-->

      <!--visualization error block-->
      <div class="visualization-error-block" *ngIf="(visualizationProgress$ | async) &&
           (visualizationProgress$ | async).statusCode !== 200">
        <visualization-error-notifier [errorMessage]="visualizationProgress$ | async"></visualization-error-notifier>
      </div>
      <!--end of visualization error block-->

      <!--visualization content-->
      <div class="visualization-content"
           *ngIf="(visualizationProgress$ | async) &&
           (visualizationProgress$ | async).percent === 100 &&
           (visualizationProgress$ | async).statusCode === 200">
        <visualization-body-section
          [id]="(visualizationUiConfig$ | async)?.fullScreen ? id + '_full_screen' : id"
          [visualizationUiConfig]="visualizationUiConfig$ | async"
          [visualizationLayers]="visualizationLayers$ | async"
          [visualizationConfig]="visualizationConfig$ | async"
        ></visualization-body-section>
      </div>
      <!--end of visualization content-->
    </div>
    <!--end of visualization body content block-->

    <!--visualization body footer block-->
    <div
      class="visualization-body-footer-block"
      *ngIf="(visualizationProgress$ | async) &&
           (visualizationProgress$ | async).percent === 100 &&
           (visualizationProgress$ | async).statusCode === 200"
    >
      <visualization-footer-section
        [type]="(visualizationConfig$ | async)?.currentType"
        [configId]="(visualizationConfig$ | async)?.id"
        [hideTypeButtons]="(visualizationUiConfig$ | async)?.hideTypeButtons"
        (visualizationTypeChange)="onVisualizationTypeChange($event)"
      ></visualization-footer-section>
    </div>
    <!-- end of visualization body footer block-->
  </div>
  <!--end of visualization body block-->

  <!--visualization chating block-->
  <!--<div class="visualization-chat-block" *ngIf="!(visualizationUiConfig$ | async)?.showInterpretionBlock &&-->
  <!--(visualizationUiConfig$ | async)?.showBody">-->
    <!--Chating-->
  <!--</div>-->
  <!--end of visualization chating block-->
</div>
